<template>
  <!-- 最外层容器，确保在移动端没有边距 -->
  <view class="mo-container">
    <!-- 主内容部分，不需要左右内边距 -->
    <view class="main-content">
      <!-- 顶部英雄区域 -->
      <view class="hero-section">
        <swiper
          class="hero-swiper"
          circular
          autoplay
          interval="3000"
          duration="500"
        >
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <view class="swiper-item">
              <image
                :src="url('banner', index, 'png')"
                mode="aspectFill"
                class="banner-image"
              ></image>
              <view class="banner-content">
                <text
                  style="font-size: larger"
                  class="font-bold animate__animated animate__slideInDown"
                >
                  {{ item.title }}
                </text>
                <text
                  style="font-size: larger"
                  class="mt-3 animate__animated animate__slideInUp animate__delay-1s"
                >
                  {{ item.subtitle }}
                </text>
                <view
                  class="uni-mt-6 flex justify-center animate__animated animate__pulse animate__infinite animate__delay-1snimate"
                >
                  <button @tap="changenav2(item.path)" class="">
                    <text class="bi bi-stars"></text> {{ item.buttonText }}
                  </button>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>

    

      <!-- 宫格 -->
      <view class="content-wrapper">
        <view class="inner-container uni-my-4">
          <view class="grid-container">
            <view
              v-for="(item, index) in gridNav"
              :key="index"
              class="grid-item uni-pa-4 d-flex justify-content-center align-items-center flex-column uni-my-4"
              @tap="handleNavigation(item)"
            >
              <view>
                <!-- <text
                  :class="['bi', item.icon, 'icon']"
                  class="uni-error fs-3"
                ></text
              > -->
                <cover-image
                  :src="url('indexicon', index, 'png')"
                  class="icon-image"
                />
              </view>
              <view class="uni-my-3">
                <text class="title">{{ item.title }}</text></view
              >
            </view>
          </view>
        </view>
      </view>

      <!-- 特色卡片区域 -->
      <view class="inner-container uni-my-4">
        <view class="section-title text-center uni-my-4">
          <text class="title-icon">◈</text>
          物理探秘
        </view>

        <view class="feature-grid uni-px-2">
          <view
            v-for="(feature, index) in features"
            :key="index"
            class="feature-card"
            @tap="handleNavigation(feature)"
          >
            <view class="feature-media">
              <image
                :src="url('ic', index, 'png')"
                mode="aspectFill"
                class="feature-image"
              />
              <view class="feature-overlay">
                <text class="feature-btn">{{
                  feature.buttonText || "立即体验"
                }}</text>
              </view>
            </view>
            <view class="feature-content">
              <view class="feature-icon">
                <text class="uni-error" :class="feature.icon"></text>
              </view>
              <text class="feature-title">{{ feature.title }}</text>
              <text class="feature-desc">{{ feature.description }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 滚动展示区域 -->
      <view class="inner-container">
        <text class="section-title text-center uni-my-4">
          <text class="title-icon">◈</text>
          精彩推荐
        </text>
      </view>
      <view class="scroll-view">
        <view class="scroll-container animate__animated animate__slideInRight">
          <view
            class="scroll-item"
            v-for="(item, index) in 3"
            :key="index"
            @tap="navigateToDetail(index)"
          >
            <cover-image
              :src="url('ib', index, 'jpg')"
              class="img-fluid"
              alt="精彩推荐"
            ></cover-image>
            <view class="scroll-caption">
              <text class="caption-text">{{
                st.cultureArray[index]?.name || "精彩推荐"
              }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="statistics-section inner-container">
        <h2 class="section-title text-center uni-my-4">
          <text class="title-icon">◈</text>
          物理发展大数据
        </h2>

        <!-- 种类分布 -->
        <view class="chart-card">
          <text class="chart-title">物理分支的占比</text>
          <view class="chart-wrapper">
            <qiun-data-charts
              type="pie"
              :opts="pieChartOpts"
              :chartData="pieChartData"
            />
          </view>
        </view>

        <!-- 地区分布 -->
        <view class="chart-card">
          <text class="chart-title">物理实验的数量</text>
          <view class="chart-wrapper">
            <qiun-data-charts
              type="bar"
              :opts="barChartOpts"
              :chartData="barChartData"
            />
          </view>
        </view>

        <!-- 受众年龄分布 -->
        <view class="chart-card">
          <text class="chart-title">物理发明数量的变化趋势</text>
          <view class="chart-wrapper">
            <qiun-data-charts
              type="line"
              :opts="lineChartOpts"
              :chartData="lineChartData"
            />
          </view>
        </view>
      </view>

      <!-- 2025年活动安排 -->
      <view class="activity-schedule inner-container">
        <text class="section-title text-center uni-my-4">
          <text class="title-icon">◈</text>
          线下雅聚
        </text>

        <view class="schedule-list">
          <view
            v-for="item in scheduleItems"
            :key="item.id"
            class="schedule-item"
            @tap="navigateToActivityDetail(item)"
          >
            <view class="schedule-date">
              <text class="month">{{ item.month }}</text>
              <text class="year">{{ item.year }}</text>
            </view>
            <view class="schedule-content">
              <text class="schedule-title">{{ item.title }}</text>
              <text class="schedule-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 时间线跳转卡片 -->
      <view class="timeline-promo-section inner-container my-2">
        <text class="section-title text-center">
          <text class="title-icon">◈</text>
          物理发展历程
        </text>

        <view
          class="uni-pa-5 animate__animated animate__pulse"
          @tap="navigateToTimeline"
        >
          <image
            :src="url('nav', '1', 'png')"
            mode="aspectFill"
            class="timeline-promo-image"
          />
          <view class="timeline-promo-content">
            <view class="timeline-years">
              <text class="year">古代</text>
              <text class="arrow">→</text>
              <text class="year">近代</text>
              <text class="arrow">→</text>
              <text class="year">现代</text>
            </view>
            <text class="timeline-promo-title">探索物理学的历史足迹</text>
            <text class="timeline-promo-desc"
              >从古代物理智慧到现代科学突破，了解物理学的发展历程</text
            >
            <button class="timeline-promo-btn" type="warn">
              <text class="bi bi-clock-history"></text> 查看完整历史
            </button>
          </view>
          <view class="timeline-promo-overlay"></view>
        </view>
      </view>

      <!-- 物理实验介绍跳转区域 -->
      <view class="dance-promo-section">
        <text class="section-title text-center">
          <text class="title-icon">◈</text>
          物理视频中心
        </text>
        <view class="promo-card animate__animated animate__pulse">
          <image
            class="promo-image"
            :src="url('nav', '9', 'png')"
            mode="aspectFill"
          />
          <view class="promo-content">
            <text class="promo-title">动手实践，探索物理奥秘</text>
            <text class="promo-desc">体验经典物理实验，感受科学探究的魅力</text>
            <button class="promo-btn" type="warn" @tap="navigateToExperiment">
              <text class="bi bi-play-circle"></text> 开始观看
            </button>
          </view>
        </view>
      </view>

      <!-- 页脚部分 -->
      <view class="inner-container uni-mx-auto uni-my-7 text-secondary text-center">
        <text class="bi bi-shield-fill-check text-success">
          中国工业信息化部
        </text>
        <a href="https://beian.miit.gov.cn/" target="_blank"
          >赣ICP备2022003789号-1</a
        >

        <text class="">
          <!-- #ifdef H5 -->

          <!-- #endif -->

          <!-- #ifdef MP-WEIXIN -->

          <text> 赣ICP备2024022400号-1</text>
          <!-- #endif -->
        </text>
      </view>
    </view>
    

  </view>    <!-- 栅格系统示例 - 使用单独的容器，有不同的边距处理 -->
    <!-- <view class="grid-example-wrapper">
      <view class="grid-example-section mo-container-grid">
        <text class="section-title text-center">
          <text class="title-icon">◈</text>
          栅格系统示例
        </text>
        <view class="mo-row">
          <view class="mo-col mo-col-12 mo-col-md-6 mo-col-lg-4">
            <view class="grid-example-item bg-primary-new">
              <text>列 1</text>
            </view>
          </view>
          <view class="mo-col mo-col-12 mo-col-md-6 mo-col-lg-4">
            <view class="grid-example-item bg-success-new2">
              <text>列 2</text>
            </view>
          </view>
          <view class="mo-col mo-col-12 mo-col-md-6 mo-col-lg-4">
            <view class="grid-example-item bg-success">
              <text>列 3</text>
            </view>
          </view>
        </view>
      </view>
    </view> -->
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";

import { useCounterStore } from "@/stores/counter";
import { checkLogin } from "@/utils/auth";
import { onShow } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/userStore";
import CustomTabBar from "@/components/custom-tab-bar/index.vue";

const userStore = useUserStore();

const handleOpenWebView = () => {
  uni.navigateTo({
    url: "/pages/ar-experience/scan",
  });
};
const st = useCounterStore();
const features = ref([
  {
    icon: "bi bi-soundwave",
    title: "声学：声动天籁",
    description: "探索声音的奥秘，感受中国古代声学智慧的传承",
    animation: "animate__fadeInLeft",
    path: "/pages/other/physics/detail?type=acoustics",
    buttonText: "了解更多",
    type: "page",
  },
  {
    icon: "bi bi-gear-fill",
    title: "力学：力驭万象",
    description: "探索中国古代力学智慧，感受科技与工程的完美结合",
    animation: "animate__fadeInLeft",
    path: "/pages/other/physics/detail?type=mechanics",
    buttonText: "了解更多",
    type: "page",
  },
  {
    icon: "bi bi-lightning-fill",
    title: "电学：电光初绽",
    description: "探索电学发展历程，领略古代智者对电现象的深刻洞察",
    animation: "animate__fadeInUp",
    path: "/pages/other/physics/detail?type=electronics",
    buttonText: "了解更多",
    type: "page",
  },
  {
    icon: "bi bi-fire",
    title: "热学：炽理传薪",
    description: "探索热学发展历程，感受中国古代热能利用的智慧结晶",
    animation: "animate__fadeInRight",
    path: "/pages/other/physics/detail?type=thermodynamics",
    buttonText: "了解更多",
    type: "page",
  },
  {
    icon: "bi bi-brightness-high-fill",
    title: "光学：光影奇缘",
    description: "探索光学奥秘，领略中国古代光学成就的璀璨光芒",
    animation: "animate__fadeInRight",
    path: "/pages/other/physics/detail?type=optics",
    buttonText: "了解更多",
    type: "page",
  },
  {
    icon: "bi bi-clipboard-data",
    title: "物理实验：格物致知",
    description: "体验中国古代物理实验探索，感受科学探究的魅力",
    animation: "animate__fadeInRight",
    path: "/pages/other/physics/detail?type=experiments",
    buttonText: "开始实验",
    type: "page",
  },
]);

const url = $url;

const changenav = (e) => {
  uni.switchTab({
    url: e,
  });
};
const changenav2 = (e) => {
  uni.navigateTo({
    url: e,
  });
};

// 新增变量
const rating = ref(3.5);
const gannanDesc = `赣傩，又名江西傩，是中国傩的重要组成部分，它以其历史久远，形态原始，品类丰富，且自成文化体系而饮誉海内外，被称为研究中国，乃至人类文明发展的"活化石"。`;

// 轮播图相关变量
const current = ref(0);
const mode = ref("dot");
const change = (e) => {
  uni.switchTab({
    url: "/pages/culture/index",
  });
};

// 规格选择相关
const specsPopup = ref(null);

const goToAiService = () => {
  uni.navigateTo({
    url: "/pages/other/ai-service/index",
  });
};

// 添加展开/收起状态管理
const expandedItems = ref(Array(3).fill(false));

// 切换文本展开/收起
const toggleText = (index) => {
  expandedItems.value[index] = !expandedItems.value[index];
};

// 添加图表宽度计算
const chartWidth = ref(0);

// 计算图表容器宽度
const initChartWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  chartWidth.value = systemInfo.windowWidth - 40; // 减去左右padding
};

onMounted(() => {
  initChartWidth();
});

// 监听窗口大小变化
onMounted(() => {});

// 跳转到答题页面
const goToQuiz = () => {
  uni.navigateTo({
    url: "/pages/other/quiz/index",
  });
};

const gridNav = [
  {
    icon: "bi-camera",
    title: "物理大家",
    path: "/pages/other/physicsGiant/index",
    type: "page",
  },
  {
    icon: "bi-book",
    title: "物理著作",
    path: "/pages/other/physicsBook/index",
    type: "page",
  },
  {
    icon: "bi-shop",
    title: "物理发明",
    path: "/pages/other/physics/inventions",
    type: "page",
  },

  {
    icon: "bi-gift",
    title: "物理游戏",
    path: "/pages/other/physicsgames/index",
    type: "page",
  },
  {
    icon: "bi-robot",
    title: "智理精灵",
    path: "/pages/other/ai-service/index",
    type: "page",
  },
  {
    icon: "bi-collection",
    title: "物海寻真",
    path: "/pages/other/quiz/index",
    type: "page",
  },

  {
    icon: "bi-chat-heart",
    title: " 理讯前沿",
    path: "/pages/other/news/index",
    type: "page",
  },
  {
    icon: "bi-info-circle",
    title: "知我之窗",
    path: "/pages/my/about",
    type: "page",
  },
];

// 修改导航处理方法
const handleNavigation = (item) => {
  try {
    if (!item) return;

    if (item.type === "tab") {
      uni.switchTab({
        url: item.path,
        fail: (err) => {
          console.error("switchTab fail:", err);
          uni.showToast({
            title: "页面跳转失败",
            icon: "none",
          });
        },
      });
    } else {
      uni.navigateTo({
        url: item.path,
        fail: (err) => {
          console.error("navigateTo fail:", err);
          uni.showToast({
            title: "页面跳转失败",
            icon: "none",
          });
        },
      });
    }
  } catch (error) {
    console.error("Navigation error:", error);
    uni.showToast({
      title: "页面跳转异常",
      icon: "none",
    });
  }
};

onShow(() => {
  checkLogin();
});

// uCharts配置
const pieChartOpts = {
  padding: [15, 15, 15, 15],
  legend: {
    show: true,
    position: "right",
    itemGap: 20,
    padding: 20,
  },
  extra: {
    pie: {
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 3,
      borderColor: "#FFFFFF",
    },
  },
};

const pieChartData = {
  series: [
    {
      data: [
        { name: "力学", value: 28 },
        { name: "热学", value: 22 },
        { name: "光学", value: 18 },
        { name: "电学", value: 17 },
        { name: "声学", value: 15 },
      ],
    },
  ],
};

const barChartOpts = {
  padding: [15, 15, 15, 15],
  xAxis: {
    disableGrid: false,
    type: "value",
    gridType: "dash",
    dashLength: 2,
    data: {
      min: 0,
      max: 100,
    },
    format: "number",
  },
  yAxis: {
    disableGrid: true,
    fontColor: "#666666",
    fontSize: 12,
  },
  extra: {
    bar: {
      type: "stack",
      width: 20,
      meterBorde: 1,
      meterFillColor: "#FFFFFF",
      activeBgColor: "#000000",
      activeBgOpacity: 0.08,
    },
  },
  enableScroll: false,
  dataLabel: true,
  legend: {
    show: false,
  },
};

const barChartData = {
  categories: ["力学", "热学", "光学", "电学", "声学", "综合"],
  series: [
    {
      name: "实验数量",
      type: "bar",
      data: [85, 75, 70, 65, 60, 45],
      color: "#6c8380",
    },
  ],
};

const lineChartOpts = {
  padding: [15, 15, 50, 15],
  enableScroll: false,
  xAxis: {
    disableGrid: true,
    rotateLabel: false,
    fontSize: 12,
    margin: 20,
    height: 30,
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2,
    data: {
      min: 0,
      max: 200,
    },
  },
  legend: {
    show: true,
    position: "top",
    float: "right",
    padding: 20,
  },
  extra: {
    line: {
      type: "curve",
      width: 2,
      activeType: "hollow",
    },
  },
};

const lineChartData = {
  categories: ["2020", "2021", "2022", "2023", "2024", "2025"],
  series: [
    {
      name: "物理发明数量",
      data: [45, 68, 85, 120, 160, 200],
      color: "#6c8380",
    },
  ],
};

const bannerList = ref([
  {
    title: "探索物理世界",
    subtitle: "感受科学魅力",
    buttonText: "立即探索",
    path: "/pages/other/physicsBook/index",
  },
  {
    title: "物理发明探究",
    subtitle: "动手实践创新",
    buttonText: "开始探索",
    path: "/pages/other/physics/inventions",
  },
  {
    title: "物理知识殿堂",
    subtitle: "探索科学奥秘",
    buttonText: "开始学习",
    path: "/pages/other/quiz/index",
  },
]);

const scheduleItems = ref([
  {
    id: 1,
    month: "5月",
    year: "2025年",
    title: "一、雅趣手作",
    desc: '每周六下午，在"线下雅聚"手工坊，体验古风器具、传统乐器或古代文具制作...',
    fullDesc: `每周六下午，在"线下雅聚"手工坊
活动时间：14:00-17:00
活动地点：线下雅聚手工坊（具体地址报名后通知）
活动内容：
1. 古风器具制作体验
2. 传统乐器制作学习
3. 古代文具复刻实践
4. 作品展示与交流
报名方式：线上预约，每期限额20人`,
    image: "nav9",
  },
  {
    id: 2,
    month: "6月",
    year: "2025年",
    title: "二、雅聚论道",
    desc: '每月第一个周日晚，在"线下雅聚"沙龙区，参与古代物理主题沙龙、辩论赛或故事...',
    fullDesc: `每月第一个周日晚，在"线下雅聚"沙龙区
活动时间：19:00-21:30
活动地点：线下雅聚沙龙区（具体地址报名后通知）
活动内容：
1. 古代物理主题分享
2. 科学辩论赛
3. 历史故事会
4. 互动交流环节
报名方式：线上预约，每期限额30人`,
    image: "nav10",
  },
  {
    id: 3,
    month: "7月",
    year: "2025年",
    title: "三、雅韵体验",
    desc: '每周日下午，在"线下雅聚"体验区，模拟古代物理实验、体验传统艺术中的物...',
    fullDesc: `每周日下午，在"线下雅聚"体验区
活动时间：13:30-16:30
活动地点：线下雅聚体验区（具体地址报名后通知）
活动内容：
1. 古代物理实验复现
2. 传统艺术体验
3. 互动实验环节
4. 成果展示与分享
报名方式：线上预约，每期限额25人`,
    image: "nav11",
  },
]);

// 添加导航方法
const navigateToActivityDetail = (item) => {
  // 将活动详情数据存储到本地，供详情页使用
  uni.setStorageSync("currentActivity", item);

  // 使用navigateTo而不是switchTab
  uni.navigateTo({
    url: "/pages/activity/detail",
  });
};

// 跳转到详情页
const navigateToDetail = (index) => {
  uni.navigateTo({
    url: `/pages/culture/detail?index=${index}`,
    fail: (err) => {
      console.error("跳转失败:", err);
      uni.showToast({
        title: "跳转失败",
        icon: "none",
      });
    },
  });
};

// 添加时间线跳转方法
const navigateToTimeline = () => {
  uni.navigateTo({
    url: "/pages/other/time/index",
  });
};

// 添加物理实验页面跳转方法
const navigateToExperiment = () => {
  uni.navigateTo({
    url: "/pages/other/dance/index",
  });
};

// 添加导航到发布商品页面的方法
const navigateToPublish = () => {
  // 检查用户是否已登录且是商家
  if (!userStore.userInfo) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/other/login'
      });
    }, 1500);
    
    return;
  }
  
  if (userStore.userInfo.role !== 2) {
    uni.showToast({
      title: '只有商家才能发布商品',
      icon: 'none'
    });
    return;
  }
  
  // 跳转到商品发布页面
  uni.navigateTo({
    url: '/pages/shop/publish'
  });
};
</script>

<style lang="scss" scoped>


.main-content {
  width: 100%;
}

.grid-example-wrapper {
  width: 100%;
  margin: 0 auto;
}

/* 英雄区域样式 */
.hero-section {
  position: relative;
  height: 500rpx;
  margin-bottom: -60rpx;
  z-index: 1;
}

.hero-swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
  padding: 40rpx;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border-radius: 40rpx 40rpx 0 0;
  margin-top: -40rpx;
  padding-top: 40rpx;
}

.icon-image {
  width: 100rpx;
  height: 100rpx;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  max-width: 80%;
}

.section-title {
  position: relative;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  display: inline-block;
  padding: 0 30rpx;
}

.title-icon {
  color: var(--td-brand-color);
  margin-right: 10rpx;
}

.culture-card {
  background: white;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5rpx);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);

    .card-image {
      transform: scale(1.05);
    }

    .card-overlay {
      opacity: 1;
    }
  }
}

.card-media {
  position: relative;
  height: 300rpx;
  overflow: hidden;

  &:hover {
    .card-overlay {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.overlay-text {
  color: white;
  font-size: 28rpx;
  padding: 16rpx 32rpx;
  border: 2rpx solid white;
  border-radius: 30rpx;
  transform: translateY(20rpx);
  transition: transform 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.card-content {
  padding: 30rpx;
  text-align: center;
}

.icon-wrapper {
  font-size: 40rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.card-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.scroll-view {
  width: 100%;
  overflow: hidden;
  margin: 20rpx 0;
}

.scroll-container {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  animation: scroll 30s linear infinite;
}

.scroll-item {
  position: relative;
  flex: 0 0 300rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  cover-image {
    width: 100%;
    height: 200rpx;
    object-fit: cover;
  }
}

.scroll-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4rpx);
  z-index: 1;
}

.caption-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.hover-card {
  transition: all 0.3s;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .hero-section {
    height: 60vh;
    text-align: center;
  }

  .hero-content {
    margin: 0 auto;
  }

  .card-media {
    height: 200rpx;
  }

  .card-content {
    padding: 20rpx;
  }
}

.section-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin-top: 30rpx;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;

  .order-label {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.order-section {
  .card-header {
    padding-bottom: 20rpx;
  }

  .order-types {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
  }

  .type-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .type-label {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}

.craft-section {
  .craft-image {
    width: 100%;
    height: 500rpx;
    border-radius: 20rpx;
    object-fit: cover;
  }
}

.culture-showcase {
  .swiper-box {
    height: 600rpx;
  }

  .swiper-item {
    position: relative;
    height: 100%;
  }

  .swiper-img {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }

  .swiper-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40rpx;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    border-radius: 0 0 20rpx 20rpx;

    .swiper-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      display: block;
    }

    .swiper-desc {
      font-size: 28rpx;
      opacity: 0.9;
      display: block;
    }
  }
}

.product-card {
  border-radius: 20rpx;
  overflow: hidden;

  .product-title {
    font-size: 28rpx;
    font-weight: bold;
  }

  .product-price {
    color: #df4c50;
    font-size: 32rpx;
    margin-top: 10rpx;
  }
}

.specs-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;

  .specs-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .product-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 10rpx;
    }
  }

  .specs-body {
    .specs-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }

    .specs-options {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .spec-item {
        padding: 10rpx 30rpx;
        border: 2rpx solid #ddd;
        border-radius: 30rpx;

        &.active {
          background-color: #df4c50;
          color: #fff;
          border-color: #df4c50;
        }
      }
    }
  }

  .specs-footer {
    margin-top: 40rpx;
  }
}

// 添加文本截断相关样式
.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;

  &.text-expanded {
    -webkit-line-clamp: unset;
  }
}

// 优化卡片动作样式
.card-actions {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.statistics-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  margin-bottom: 40rpx;

  .statistics-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.chart-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .chart-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: block;
    text-align: center;
  }

  .chart-wrapper {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* 动画过渡 */
.statistics-section {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rpx;
  padding: 10rpx;
}

.grid-item {
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    background-color: #f5f5f5;
  }

  .title {
    font-size: 26rpx;
    color: #333;
  }
}

/* 添加动画效果 */
.grid-item {
  animation: fadeInUp 0.5s ease-out;
  animation-fill-mode: both;

  @for $i from 1 through 8 {
    &:nth-child(#{$i}) {
      animation-delay: $i * 0.1s;
    }
  }
}

.knowledge-section {
  padding: 60rpx 0;
  background-color: #f8f8f8;
}

.section-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 40rpx;
  font-weight: bold;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.knowledge-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.card-desc {
  font-size: 26rpx;
  color: #666;
  text-align: center;
  margin-bottom: 20rpx;
}

.card-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.feature-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.feature-media {
  position: relative;
  width: 100%;
  height: 300rpx;
  overflow: hidden;
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.feature-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-btn {
  color: #fff;
  font-size: 28rpx;
  padding: 16rpx 32rpx;
  border: 2rpx solid #fff;
  border-radius: 30rpx;
}

.feature-content {
  padding: 30rpx;
  text-align: center;
}

.feature-icon {
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

.feature-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.feature-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.feature-card:active {
  .feature-overlay {
    opacity: 1;
  }

  .feature-image {
    transform: scale(1.05);
  }
}

/* 添加图表容器样式 */
.chart-wrapper {
  width: 100%;
  height: 300px;
}

/* #ifdef MP-WEIXIN */
.chart-wrapper {
  margin: 10rpx auto;
}
/* #endif */

/* 活动安排样式 */
.activity-schedule {
  padding: 40rpx 0;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.schedule-item {
  display: flex;
  gap: 30rpx;
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
  }
}

.schedule-date {
  background: var(--td-brand-color, #6c8380);
  color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  text-align: center;
  min-width: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .month {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 4rpx;
  }

  .year {
    font-size: 24rpx;
    opacity: 0.9;
  }
}

.schedule-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;

  .schedule-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .schedule-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.schedule-more {
  display: flex;
  align-items: center;
  margin-top: 20rpx;

  .more-text {
    font-size: 24rpx;
    color: var(--td-brand-color, #6c8380);
  }

  .bi {
    font-size: 24rpx;
    color: var(--td-brand-color, #6c8380);
    margin-left: 4rpx;
  }
}

/* 时间线跳转卡片样式 */
.timeline-promo-section {
  padding: 40rpx 0;
}

.timeline-promo-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.timeline-promo-content {
  padding: 30rpx;
  text-align: center;
}

.timeline-years {
  margin-bottom: 20rpx;
}

.year {
  font-size: 36rpx;
  font-weight: bold;
  margin: 0 10rpx;
}

.arrow {
  font-size: 32rpx;
  margin: 0 10rpx;
}

.timeline-promo-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.timeline-promo-desc {
  font-size: 28rpx;
  color: #666;
}

.timeline-promo-btn {
  margin-top: 20rpx;
  padding: 16rpx 32rpx;
  border: 2rpx solid var(--td-brand-color, #6c8380);
  border-radius: 30rpx;
  background-color: #fff;
  color: var(--td-brand-color, #6c8380);
  font-size: 28rpx;
  transition: all 0.3s ease;

  &:hover {
    background-color: var(--td-brand-color, #6c8380);
    color: #fff;
  }
}

/* 傩舞介绍跳转区域样式 */
.dance-promo-section {
  padding: 40rpx 0;
  background-color: #fff;
}

.promo-card {
  position: relative;
  overflow: hidden;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
}

.promo-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.promo-content {
  padding: 30rpx;
  text-align: center;
}

.promo-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.promo-desc {
  font-size: 28rpx;
  color: #666;
}

.promo-btn {
  margin-top: 20rpx;
  padding: 16rpx 32rpx;
  border: 2rpx solid var(--td-brand-color, #6c8380);
  border-radius: 30rpx;
  background-color: #fff;
  color: var(--td-brand-color, #6c8380);
  font-size: 28rpx;
  transition: all 0.3s ease;

  &:hover {
    background-color: var(--td-brand-color, #6c8380);
    color: #fff;
  }
}

.promo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
}

/* 栅格示例样式 */
.grid-example-section {
  padding: 30rpx 0;
  margin-bottom: 30rpx;
}

.grid-example-item {
  padding: 30rpx;
  text-align: center;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120rpx;
}

.bg-primary-new {
  background-color: var(--td-brand-color-2);
  color: #333;
}

.bg-success-new2 {
  background-color: var(--td-brand-color-3);
  color: #333;
}

.bg-success {
  background-color: var(--td-brand-color-4);
  color: #333;
}

/* 商家操作按钮 */
.merchant-action {
  position: relative;
  z-index: 10;
  padding: 20rpx 30rpx;
  margin-top: -30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: flex-end;
}

.publish-btn {
  background-color: var(--td-brand-color);
  color: white;
  font-size: 28rpx;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
